<template>
    <div class="utable" ref="utable">
        <el-table
                ref="multipleTable"
                :data="data"
                :border="showBorder"
                class="u-table"
                :height="uHeight"
                row-key="id"
                :max-height="maxHeight"
                @row-click="handleRowClick"
                @sort-change="sortChangeHandle"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection"
                             width="55"
                             :reserve-selection="true"
                             v-if="selection"></el-table-column>
            <el-table-column type="index"
                             label="序号"
                             width="60"
                             v-if="index">
            </el-table-column>
            <template v-for="(col,colIndex) in cols">
                <el-table-column
                        :prop="col.prop"
                        :label="col.label"
                        :min-width="col.minWidth"
                        :width="col.width"
                        :header-align="col.headerAlign"
                        :align="col.align"
                        v-if="col.hidden || true"
                        :sortable="col.sortable"
                        :show-overflow-tooltip="typeof col.overflow == 'boolean'?col.overflow:true"
                        :fixed="col.colFixed"
                >
                    <template slot-scope="scope">
                        <template v-if="col.render">
                            <Render :renderDom="h=>{ return col.render(h,scope)}"></Render>
                        </template>
                        <template v-else-if="col.formatTime || col.prop == 'createTime'">
                            <span> {{formatTimeHandle(scope.row[col.prop])}}</span>
                        </template>
                        <template v-else>
                            <span> {{scope.row[col.prop]}}</span>
                        </template>
                    </template>
                </el-table-column>

            </template>
            <el-table-column label="操作"
                             :width="actions[0].width"
                             :min-width="actions[0].minWidth"
                             fixed="right"
                             class="actionStyle"
                             :header-align="actions[0].headerAlign"
                             :align="actions[0].align"
                             style=" background: #F9FAFC; font-size: 14px;color: #000;"
                             v-if="actions.length">
                <template slot-scope="scope">
                    <button-collapse :cIndex="JSON.parse(JSON.stringify(scope.$index))" :time="time" v-if="tableBtnIsCollapse">
                        <template v-for="action in actions">
                            <template v-if="action.render">
                                <Render :renderDom="h=>{ return action.render(h,scope)}"/>
                            </template>
                            <template v-else>
                                <el-button type="text" v-if="typeof action.isShowBtn == 'boolean'?action.isShowBtn:true" :class="action.btnClass" @click.stop="action.handle(scope)">{{action.label}}</el-button>
                            </template>
                        </template>
                    </button-collapse>
                    <template v-for="(action,bindex) in actions" v-else>
                        <template v-if="action.render">
                            <Render :renderDom="h=>{ return action.render(h,scope)}"/>
                        </template>
                        <template v-else>
                            <el-button type="text" v-if="typeof action.isShowBtn == 'boolean'?action.isShowBtn:true" :class="action.btnClass" @click.stop="action.handle(scope)">{{action.label}}</el-button>
                        </template>
                    </template>
                </template>
            </el-table-column>
            <span class="clear"></span>
            <template slot="empty">
                <div class="dytable-view-empty">
                    <p>暂无数据</p>
                </div>
            </template>
        </el-table>

        <el-row type="flex" justify="center" style="text-align: center;padding-bottom:15px">
            <el-pagination
                    v-if="pagination"
                    class="page-list-pagination"
                    background
                    layout="total,sizes,prev,pager,next,jumper"
                    :currentPage.sync="cPageNumber"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    @size-change="handlePageSizeChange"
                    @current-change="handlePageNumberChange">
            </el-pagination>
        </el-row>
        <div class="clear"></div>
    </div>
</template>

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import buttonCollapse from './buttonCollapse.vue'
    const Render = {
        props: {
            renderDom: {
                type: Function,
                default: (h) => h('')
            }
        },
        render(h) {
            return this.renderDom(h)
        },
    };

    export default {
        name: "uTable",
        components: {Render,buttonCollapse},
        props: {
            emptyText: {
                type: String,
                default: "暂无数据"
            },
            pagination: {
                type: Boolean,
                default: true,
            },
            showBorder: {
                type: Boolean,
                default: false,
            },
            index: {
                type: Boolean,
                default: false,
            },
            selection: {
                type: Boolean,
                default: false,
            },
            data: {
                type: Array,
                default: () => []
            },
            maxHeight: {
                type: Number,
                defalut: 550
            },
            total: {
                type: Number,
                default: 0,
            },
            pageNumber: {
                type: Number,
                default: 1,
            },
            pageSize: {
                type: Number,
                default: 5,
            },
            pageSizes: {
                type: Array,
                default: ()=> {
                    return [5, 10, 15, 20, 30]
                },
            },
            cols: {
                /*
                 * cols:[
                 *   {
                 *       label: String,
                 *       prop: String,
                 *       width: Number,
                 *       minWidth: Number,
                 *       headerAlign: String,
                 *       align：String,
                 *       overflow: Boolean,
                 *       hidden: Boolean,
                 *       sortable: Boolean,
                 *       formatTime: Boolean,
                 *       render: Function,
                 *   }
                 * ]
                 * */
                type: Array,
                default: () => []
            },
            actions: {
                /*
                 * actions:[
                 *   {
                 *       label: String,
                 *       btnClass:String,
                 *       isShowBtn:Boolean,
                 *       handle: Function,
                 *       render: Function,
                 *   }
                 * ]
                 * */
                type: Array,
                default: () => []
            },
            tableBtnIsCollapse:{
                type:Boolean,
                default:true
            },
            // 组件的高度是否根据满屏需要来计算，默认为true
            isFullScreen:{
                type:Boolean,
                default:true
            }
        },
        watch: {
            pageNumber(val){
                this.cPageNumber = val;
            },
        },
        data() {
            return {
                cPageNumber: 1,
                time:0,
                uHeight:null
            }
        },
        updated(){
            if(this.isFullScreen){
                this.tableViewHeight()
            }
            // 解决组件数据更新，折叠组件UI未更新问题
            this.time = (new Date()).valueOf();
        },
        mounted(){
            // 监听窗口变化，将时间戳传给子组件，子组件watch time再重新计算操作列宽度，解决多个相同子组件监听窗口变化被覆盖的问题
            window.onresize = () => {
                 this.time = (new Date()).valueOf();
                 this.tableViewHeight();
            }
        },
        methods: {
            tableViewHeight(){
                const h = this.$refs.utable.clientHeight - 70;
                if(h >= 369){
                    this.uHeight = h;
                }
            },
            formatTimeHandle(time){
                let fTime = this.$formatTime(time);
                return fTime
            },
            handlePageSizeChange(val) {
                this.$emit('pageSize', val);
            },

            handlePageNumberChange(val) {
                this.$emit('pageNumber', val);
            },

            handleRowClick(row, event, column){
                this.$emit('rowClick', row, event, column);
            },

            handleSelectionChange(val){
                this.$emit('selection', val);
            },

            // 取消checkBox选中
            handleCancelSelect(){
                this.$refs.multipleTable.clearSelection();
            },

            // 排序触发时间
            sortChangeHandle(obj){
                this.$emit('sortChange',obj)
            },

        }
    }
</script>

<style scoped lang="scss">
    .utable {
        position: relative;
        width: 100%;
        padding-top: 25px;
        min-height: 280px;
        box-sizing: border-box;
        height:100%;

    /deep/
    .el-table__header-wrapper {
        thead  {

            th{
                background:#F9FAFC;
                color: #000;
                /*background: $primary-color;*/
                /*color: #ffffff;*/
                font-size: 14px;
            }
        }
    }

 /deep/ .el-table th{
            background:#F9FAFC;
            font-size: 14px;
            color: #000;

        }
        /deep/ .el-table__fixed-right-patch{
                   background:#F9FAFC;
               }
     /deep/
    .el-table th > .cell {
        /*padding-left:14px*/
    }

    .table-btn-groud {
        position: relative;
        text-align: right;
        padding-right: 8px;
    }

    .u-table{
        position: relative;
        width: 100%;
    }
    .page-list-pagination {
        padding-top: 18px;
        width: 100%;
    }

    }
    /deep/ .el-table__fixed-right::before, .el-table__fixed::before{
               height:0
           }

</style>
<style>
    .el-table .warning-row {
        background: oldlace !important;
    }
</style>
